<template>
	<view class="pt150">
		<view class="cen">
			<image src="../../../static/img/shouji.png" class="snbhhgwer" mode="widthFix"></image>
			<view class="mt50 cf fz28">
				{{phone}}
			</view>
		</view>
		<view class="mt140 pd">
			<view class="formrow ">
				<view class="z9 fz28">
					更换后的手机号
				</view>
				<view class="mt20 pr  ">
					<input type="number" value="" class="jhhgerttyt" maxlength="11" placeholder="请输入手机号" v-model="forms.tel"/>					
				</view>
			</view>
			<view class="formrow mt90">
				<view class="z9 fz28">
					验证码
				</view>
				<view class="mt20 pr  ">
					<input type="number" value="" class="jhhgerttyt" placeholder="请输入验证码" v-model="forms.yzm"/>
					<text class="z9 fz24 kjnxeeetxe mr20" v-if="num>0">{{num}}s重新获取</text>
					<text class="ls fz24 kjnxeeetxe mr20" @tap="code" v-else>获取验证码</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				phone:"",
				forms:{
					tel:"",
					yzm:""
				},
				num:0,
				key:{}
			}
		},
		components: {},
		methods: {
			code(){
				if (!this.forms.tel) {
					uni.showToast({
						icon: "none",
						title: '请输入手机号'
					})
					return
				}
				if (this.num > 0) {
					return
				}
				this.num = 60
				this.down()
			},
			async down(){				
				let val = {}
				val.phone = this.forms.tel
				let getfetch = await this.post('/api/verificationCodes', val)
				// console.log("验证码",getfetch)
				this.key=getfetch
				let timing = setInterval(a => {
					if (this.num-- < 1) {
						clearInterval(timing)
					}
				}, 1000)
			},
			async modify(){
				let value={}
				value.phone=this.forms.tel
				value.verification_key=this.key.key
				value.verification_code=this.forms.yzm
				let fetchs= await this.get('/api/phone',value,"PUT")
				console.log("修改",fetchs,fetchs.code)
				if(fetchs.code==0){
					uni.redirectTo({
						url:'ReplaceSuccess?tel='+this.forms.tel
					})
				}
			}
		},
		onNavigationBarButtonTap(e) {
			this.modify()
		},
		mounted() {},
		onShow() {			
			let phones=this.$store.state.userinfo.phone
			this.phone=phones.replace(/(^1\d{2})(\d{4})(\d{4})/g,'$1****$3')
		}
	}
</script>
<style scoped>
	.snbhhgwer {
		width: 120upx;
	}
</style>
